<script>
import {defineComponent} from 'vue'
import moment from 'moment'

export default defineComponent({
    name: "brandManagement",
    data() {
        return {
            searchId: '',
            searchName: '',
            searchText: '',
            carList: [
                {
                    id: 1,
                    name: "奔驰",
                    time: new Date()
                },
                {
                    id: 2,
                    name: "宝马",
                    time: new Date()
                },
            ],
            carList1: [
                {
                    id: 1,
                    name: "奔驰",
                    time: new Date()
                },
                {
                    id: 2,
                    name: "宝马",
                    time: new Date()
                },
            ],
            aseIndex: '',
            newName: '',
            oldName: '',
            xgName: '',
        }
    },
    methods: {
        // 添加
        add() {
            let obj = {};
            if (this.searchId != '' && this.searchName != '') {
                obj = {
                    id: this.searchId,
                    name: this.searchName,
                    time: new Date()
                }
                if (this.carList.every(item => item.id != this.searchId)) {
                    this.carList.push(obj);
                    this.searchId = '';
                    this.searchName = '';
                    this.carList1 = [...this.carList];
                    // console.log(this.carList)
                    localStorage.setItem('carData', JSON.stringify(this.carList))
                    // localStorage.setItem(JSON.stringify(this.carList1))
                } else {
                    alert('数据重复')
                }
            } else {
                alert('请填写数据')
            }
        },
        // 删除
        remov(n) {
            this.aseIndex = n;
            this.ase = true
        },
        areYouSure() {
            if (this.ase) {
                this.carList.splice(this.aseIndex, 1)
                localStorage.setItem('carData', JSON.stringify(this.carList))
            }
            this.ase = false
        },
        // 搜索
        search() {
            this.carList = this.carList1.filter((item) => {
                return item.name.includes(this.searchText)
            })
        },
        // 修改
        revise (k, n) {
            this.oldName = k.name;
            this.xgName = n;
        },
        confirm() {
            if (this.newName != '') {
                this.carList[this.xgName].name = this.newName;
                this.newName = '';
                localStorage.setItem('carData', JSON.stringify(this.carList))
            }
        }
    },
    filters: {
        setTime () {
            return  moment().format('YYYY-MM-DD hh:mm:ss')
        }
    },
    created () {
        // if (this.key) {
        //      localStorage.setItem('carData', JSON.stringify(this.carList));
        //     this.key = false
        // }

        let car = JSON.parse(localStorage.getItem('carData'));
        console.log(car)
        this.carList = car;
    }

})
</script>

<template>
    <div class="container">
        <div class="card">
            <div class="card-header">添加品牌</div>
            <div class="card-body">
                <form class="form-inline" action="">
                    <label for="email" class="mr-sm-2">Id:</label>
                    <input type="text" class="form-control mb-2 mr-sm-2" v-model="searchId">
                    <label for="pwd" class="mr-sm-2">Name:</label>
                    <input type="text" class="form-control mb-2 mr-sm-2" v-model="searchName">
                    <button type="button" class="btn btn-primary mb-2" @click="add">添加</button>
                    <label for="pwd" class="mr-sm-2">搜索名称关键字:</label>
                    <input type="text" class="form-control mb-2 mr-sm-2" v-model="searchText" @keyup="search()">
                </form>
            </div>
            <div class="card-footer">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in carList" :key="item.id">
                        <th>{{ item.id }}</th>
                        <th>{{ item.name }}</th>
                        <th>{{ item.time | setTime}}</th>
                        <td>
                            <button type="button" class="btn btn-danger btn-primary" data-toggle="modal"
                                    @click="remov(index)" data-target="#myModal">删除
                            </button>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_1"
                                    @click="revise(item, index)">修改
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- 模态框 -->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!-- 模态框主体 -->
                        <div class="modal-body" style="text-align: center">
                            <p>是否确定删除？</p>
                            <button type="button" class="btn btn-secondary btn-danger" data-dismiss="modal" @click="areYouSure()">确认</button>
                            <button type="button" class="btn btn-secondary shutDown" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 模态框 -->
            <div class="modal fade" id="myModal_1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">修改名字</h4>
                        </div>
                        <!-- 模态框主体 -->
                        <div class="modal-body">
                            <label for="oldName" class="mr-sm-2">原名字:</label>
                            <input type="text" :value="oldName" id="oldName" disabled/>
                            <br/>
                            <label for="newName" class="mr-sm-2">新名字:</label>
                            <input type="text" v-model="newName" id="newName"/>
                        </div>
                        <!-- 模态框底部 -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-danger" data-dismiss="modal" @click="confirm()">确认</button>
                            <button type="button" class="btn btn-secondary shutDown" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
td {
  button {
    margin-right: 10px;
  }
}

.modal-dialog {
  top: 120px;
}

.modal-body {
  height: 200px;

  p {
    position: absolute;
    font-size: 20px;
    text-align: center;
    top: 75px;
    left: 174px;
  }
}

.btn-secondary {
  position: absolute;
  bottom: 28px;
  right: 95px;
  margin-right: 10px;
}

.shutDown {
  right: 15px;
}
</style>